<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>充电记录</title>
		<link rel="stylesheet" href="css/global.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/children.css" />

	</head>
	<body>
		<div class="main">
			<div class="white-box white-padding">
				<p class="txt-s font24 color_gray mb-5">温馨提醒：</p>
				<p class="txt-s font24 color_gray mb-5">1.仅展示最近三个月充电订单</p>
				<p class="txt-s font24 color_gray mb-5">2.如需查看更多信息请点击这里<a href="#" class="color_blue">联系运营商客服</a></p>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>
				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>

				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>

				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>

				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>

				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>

				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>

				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
			<div class="buy-record-small-list">
				<div class="buy-record-title">
					<div class="title title-box">
						<img src="images/icon/icon-small-jilu.png" class="icon-dianche" />
						<span class="order-number">订单编号：23021401010100001</span>
					</div>
					<span class="copy-btn">复制</span>
				</div>
				<div class="buy-record-small-cont">
					<div class="cont-left cont-left-width">
						<p>100001-2</p>
						<span class="txt-s">设备编号</span>
					</div>
					<div class="cont-center cont-center-width">
						<p class="origin">-0.00</p>
						<span class="txt-s">订单金额(元)</span>
					</div>

				</div>
				<div class="buy-record-small-bottom">
					<div class="left-name">交易时间：12-07 09:23</div>
					<div class="right-name font-blue">交易完成></div>
				</div>
			</div>
		</div>
		<div class="footer-box">
			<a class="footer-warp" href="首页.html">
				<img src="images/tabbar/icon-home-active.png" class="icon-home" />
				<p class="footer-name">首页</p>
			</a>

			<a class="footer-warp" href="扫码充电.html">
				<img src="images/tabbar/icon-sao.png" class="icon-sao" />
			</a>

			<a class="footer-warp" href="个人中心.html">
				<img src="images/tabbar/icon-wode.png" class="icon-home" />
				<p class="footer-name">个人中心</p>
			</a>
		</div>

		<!-- 弹出框 -->
		<div class="msg-box-wrap">
			<div class="alert-warp-box">
				<h5 class="alert-title-box">
					<p>订单详情</p>
				</h5>
				<div class="alert-cont-box">
					<div class="detail-list">
						<div class="left-name">订单编号：</div>
						<div class="right-name">23120709233823282402</div>
					</div>
					<div class="detail-list">
						<div class="left-name">用户编号：</div>
						<div class="right-name">123123123123</div>
					</div>
					<div class="detail-list">
						<div class="left-name">设备编号：</div>
						<div class="right-name">123123213</div>
					</div>
					<div class="detail-list">
						<div class="left-name">订单类型：</div>
						<div class="right-name">单次充电</div>
					</div>
					<div class="detail-list">
						<div class="left-name">充电类型：</div>
						<div class="right-name">60分钟</div>
					</div>
					<div class="detail-list">
						<div class="left-name">开始时间：</div>
						<div class="right-name">2023年12月28日23:10:37</div>
					</div>
					<div class="detail-list">
						<div class="left-name">结束时间：</div>
						<div class="right-name">2023年12月28日23:10:40</div>
					</div>
					<div class="detail-list">
						<div class="left-name">充电时长：</div>
						<div class="right-name">4分钟</div>
					</div>
					<div class="detail-list">
						<div class="left-name">结束原因：</div>
						<div class="right-name">手动停止充电</div>
					</div>
					<div class="detail-list">
						<div class="left-name">扣款账户：</div>
						<div class="right-name blue">0元</div>
					</div>
				</div>
				<div class="line-box"></div>
				<div class="yiwen-box">
					<img src="images/icon/icon-kefu-blue.png" class="icon-kefu-s">
					<p>对订单有疑问？点击<a class="color_blue">联系运营商客服</a></p>
				</div>
				<img src="images/icon/icon-white-close.png" class="icon-close">
			</div>
		</div>

		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/rem.js"></script>
		<script type="text/javascript" src="js/init.js"></script>
		<script type="text/javascript">
			$(function() {

				$('.icon-close').click(function() {
					$('.msg-box-wrap').removeClass('show')
				})
				$('.buy-record-small-list').click(function() {
					$('.msg-box-wrap').addClass('show')
				})


			})
		</script>
	</body>
</html>